<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='轮播管理',active='carousel'">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>
<link th:href="@{/admin/plugins/toggles/toggles.css}" rel="stylesheet"/>
<style>
    .layui-upload-img {
        width: 80%;
        height: 300px;
        margin: 0 10px 10px 0;
    }
</style>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            <th:block th:if="${null != contents}">
                                编辑轮播
                            </th:block>
                            <th:block th:unless="${null != contents}">
                                发布轮播
                            </th:block>
                        </h4>
                    </div>
                    <div class="col-md-12">
                        <form id="articleForm" role="form" novalidate="novalidate">
                            <input type="hidden" name="id"
                                   th:value="${contents!=null and contents.id!=null}?${contents.id}: ''" id="id"/>
                            <input type="hidden" name="flag"
                                   th:value="${contents!=null and contents.flag !=null}?${contents.flag}: 'n'"
                                   id="status"/>
                            <input type="hidden" name="rank"
                                   th:value="${contents!=null and contents.rank !=null}?${contents.rank}: '1'"
                                   id="rank"/>

                            <div class="form-group">
                                <input type="text" class="layui-input" placeholder="请输入轮播标题" name="title" required=""
                                       aria-required="true"
                                       th:value="${contents!=null and contents.title!=null }?${contents.title}: ''"/>
                            </div>

                            <div class="form-group">
                                <input type="text" class="layui-input" placeholder="请输入图片调转地址（如果为空则为#）"
                                       name="redirect_url"
                                       required=""
                                       aria-required="true"
                                       th:value="${contents!=null and contents.redirect_url !=null}?${contents.redirect_url}: ''"/>
                            </div>
                            <div class="form-group">
                                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                    <legend>轮播排序值（越大越靠前,默认rank为1）</legend>
                                </fieldset>
                                <div id="slideTest2" class="demo-slider"></div>
                            </div>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <mark>大尺寸图片</mark>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1"/>
                                    <p id="demoText"></p>
                                </div>
                            </div>
                            <div class="text-left">
                                <a class="layui-btn layui-btn-radius layui-btn-primary" th:href="@{/admin/carousel}">返回轮播列表</a>
                                <button type="button" class="layui-btn layui-btn-radius layui-btn-normal"
                                        onclick="addCarousel()">发布
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
                <div th:replace="admin/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/footer :: footer"></div>
<script th:src="@{https://www.layuicdn.com/layui-v2.5.4/layui.js}"></script>
<script type="text/javascript">
    layui.use(['upload', 'slider'], function () {
        var slider = layui.slider;
        //定义初始值
        slider.render({
            elem: '#slideTest2'
            , value: $('#articleForm input[name=rank]').val() //初始值
        });
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/admin/carousel/upload_qiniu'
            , method: 'post'
            , accept: 'images'
            , acceptMime: 'image/*'
            , field: 'img'
            , done: function (res) {
                //如果上传失败
                if (res.code == 400) {
                    return layer.msg('上传图片失败', {icon: 5});
                } else {
                    layer.msg('上传成功', {icon: 1});
                    //上传成功,获得图片地址
                    // alert(res.url);
                    $('#demo1').attr('src', res.url);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

    //执行发布还是编辑修改
    function addCarousel() {
        // debugger;
        var id = $('#articleForm input[name=id]').val();
        var title = $('#articleForm input[name=title]').val();//标题
        var url = $(".layui-upload-list img.layui-upload-img").attr("src");//图片链接地址
        var redirect_url = $('#articleForm input[name=redirect_url]').val();//图片调转地址
        var rank = $(".demo-slider div.layui-slider-tips").html();//排序值
        if (title == '') {
            layer.tips('请输入轮播标题', '#articleForm input[name=title]', {
                tips: 3
            });
            return;
        }
        if (redirect_url == '') {
            redirect_url = "#";
        }
        if (rank == '') {
            rank = 1;
        }
        if (url == '' || url == null || url == 'undefined') {
            layer.tips('请上传图片', '#test1', {
                tips: 3
            });
            return;
        }
        var post_url = $('#articleForm #id').val() != '' ? '/admin/carousel/modify' : '/admin/carousel/publish';
        //请求后台执行发布
        $.ajax({
            type: "post",
            url: post_url,
            data: {
                "id": id,
                "title": title,
                "url": url,
                "redirectUrl": redirect_url,
                "rank": rank,
                "flag": 'n'
            },
            async: true, // 异步请求
            cache: false, // 设置为 false 将不缓存此页面
            dataType: 'json', // 返回对象
            success: function (data) {
                if (data.code == 0) {
                    layer.msg("发布成功", {icon: 1});
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function (data) {
                layer.msg(data.msg, {icon: 5});
            }
        })
    }
</script>

</body>
</html>